<template>
  <div class="user-table-wrapper">
    <div class="page" v-for="(tableData, idx) in tableList" :key="idx">
      <div class="title">
        表 A.{{order}}{{ idx > 0 ? '（续）' : '' }} 用户数据一览表
      </div>

      <el-table :data="tableData" border>
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="age" label="年龄" align="center" />
        <el-table-column prop="platform" label="来源" align="center">
          <el-table-column prop="platform.name" label="平台" align="center" />
          <el-table-column prop="platform.type" label="类型" align="center" width="180">
            <template slot-scope="scope">
              <el-checkbox-group v-model="scope.row.platform.type">
                <el-checkbox label="BACKEND">后台</el-checkbox>
                <el-checkbox label="NO_BACKEND">非后台</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="member" label="会员" align="center">
          <el-table-column prop="member.level" label="等级"  align="center" />
          <el-table-column prop="member.score" label="积分" align="center" />
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'UserTable',
  props: {
    order: {
      type: String,
      default: '2',
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableList: [],
    };
  },
  watch: {
    data: {
      handler(data) {
        const items = _.cloneDeep(data);
        items.forEach((item) => {
          item.platform.type = [item.platform?.type];
        });
        this.tableList = _.chunk(items, 14);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.user-table-wrapper {
  /deep/ .el-checkbox {
    margin-right: 6px;

    .el-checkbox__inner {
      border: 1px solid #000;

      &::after {
        border: 1px solid #000;
        border-left: 0;
        border-top: 0;
      }
    }

    .el-checkbox__label {
      color: #000;
      font-size: 16px;
    }

    &.is-checked .el-checkbox__inner {
      background-color: #fff;
    }
  }
}
</style>
